<template>
  <div class="newsinfoContainer">
    <!-- 标题部分 -->
    <section class="title">
      <h2>{{ this.news.title }}</h2>
    </section>
    <!-- 编辑、日期、阅读量 -->
    <section class="des">
      <p>
        <span class="author">编辑:{{ this.news.author }}</span>
        <span class="add_time">日期:{{ this.news.add_time | dateFormat }}</span>
        <span class="click_count">阅读:{{ this.news.click_count }}</span>
      </p>
    </section>
    <!-- 图片 -->
    <section class="img">
      <img :src="this.news.img_url" alt="" srcset="" />
    </section>
    <!-- 正文 -->
    <section class="content">
      <div v-html="this.news.content"></div>
    </section>
    <!-- 评论 -->
    <section class="comment">
      <!-- 封装一个评论组件 -->
      <comment :id="this.newsid"></comment>
    </section>
  </div>
</template>
<script>
import comment from '../subComponemts/comment.vue'//导入评论组件
export default {
  data() {
    return {
      newsid: this.$route.params.id, //获取路由传递过来的参数
      news: {}, //保存通过ajax请求传递过来的数据
    };
  },
  created() {
    this.loadNewsInfo();
  },
  methods: {
    loadNewsInfo: function () {
      this.$ajax({
        method: "get",
        url: "/news/newsinfo",
        params: {
          newsid: this.newsid,
        },
      }).then((response) => {
        var data = response.data;
        if (data.Status == 0) {
          this.news = data.Data[0];
        }
      });
    },
  },
  components:{
      comment,
  }
};
</script>
<style lang="less">
.newsinfoContainer{
    padding:15px;
    .title{
        padding: 5px 0;
        font-size: 24px;
        color:#333;
    }
    .des{
        font-size: 12px;
        color: #aaa;
        padding-bottom: 20px;
        p{
            display: flex;
            justify-content: space-between;
        }
    }
    .img{
        img{
          width: 100%;
        }
       
    }
    padding-bottom: 10xp;
    .content{
        font-size: 14px;
        color: #444;
        p{
            text-indent: 20px;
        }
        img{
            width: 100%;
        }
    }
}
</style>